<script setup lang="ts">
import config from "../../../../config";


const props = defineProps<{
  previewList: ListHouseMedia[]
}>()
</script>

<template>
  <el-scrollbar :always="true">
  <div class="container">
      <div class="preview_item" v-for="item in props.previewList">
        <el-image v-if="item.media_type === 'image'"
                  class="pre_img"
                  :src="config.baseUrl + '/' + item.media_url"
                  fit="cover"
                  loading="lazy"
                  :preview-src-list="props.previewList.filter((item: ListHouseMedia) => item.media_type === 'image').map((item: ListHouseMedia) => config.baseUrl + '/' + item.media_url)"
                  :initial-index="props.previewList.filter((item: ListHouseMedia) => item.media_type === 'image').findIndex((mItem: ListHouseMedia) => mItem.id === item.id)"
        />
        <video class="pre_video" v-else :src="config.baseUrl + '/' + item.media_url" controls>
          抱歉，你的浏览器不支持内嵌视频，不过不用担心，你可以
          <a :href="config.baseUrl + '/' + item.media_url">下载</a>
          并用你喜欢的播放器观看！
        </video>
      </div>
  </div>
  </el-scrollbar>
</template>

<style scoped lang="less">
  .container {
    display: flex;
    height: 200px;
    align-items: center;
    .preview_item {
      flex-shrink: 0;
    }
    .pre_img {
      width: 200px;
      height: 150px;
      margin-left: 20px;
    }
    .pre_video {
      width: 200px;
      height: 150px;
      margin-left: 20px;
      object-fit: fill;
    }
  }
</style>